<!-- 人员花名册弹出框，用来选择人员 -->
<template>
  <a-modal
    width="80%"
    v-model:visible="visible"
    :mask-closable="false"
    draggable
    title-align="center"
    unmount-on-close
    title="选择人员"
  >
    <template #footer>
      <a-button @click="visible = false">取消</a-button>
      <a-button @click="handleOk" type="primary">确认</a-button>
    </template>
    <div class="main">
      <a-space style="margin-bottom: 20px">
        <a-input v-model="mobile" placeholder="请输入手机号码" />
        <a-input v-model="name" placeholder="请输入姓名" />
      </a-space>
      <a-table
        row-key="id"
        :data="userCopyList"
        :row-selection="{
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false
        }"
        v-model:selected-keys="selectIds"
        ref="refTable"
      >
        <template #columns>
          <a-table-column :width="200" data-index="name" title="姓名" />
          <a-table-column :width="200" data-index="userType" title="状态">
            <template #cell="{ record }">
              {{
                record.progress === 1
                  ? '入职申请'
                  : record.progress === 2
                  ? '待入职'
                  : record.progress === 3
                  ? '预入职'
                  : record.progress === 4
                  ? '入职办理'
                  : record.progress === 5
                  ? '正式入职'
                  : record.progress === 6
                  ? '待离职'
                  : record.progress === 7
                  ? '离职'
                  : record.progress === 8
                  ? '放弃入职'
                  : record.progress === 9
                  ? '实习结束'
                  : record.progress === 10
                  ? '转正'
                  : record.progress === 11
                  ? '试用期'
                  : record.progress === 12
                  ? '人事异动'
                  : ''
              }}
            </template>
          </a-table-column>
          <a-table-column :width="200" data-index="mobile" title="手机电话" />
        </template>
      </a-table>
    </div>
  </a-modal>
  <div class="form">
    <div class="mask" @click="if (!disabled) visible = true;" />
    <a-select
      multiple
      style="width: 100%"
      v-model="copyValues"
      :scrollbar="true"
      :disabled="disabled"
      :placeholder="placeholder"
    >
      <a-option v-for="item in userList" :key="item.id" :value="item.id">
        {{ item.name }}
      </a-option>
    </a-select>
  </div>
</template>

<script lang="ts" setup>
import { GetHumanRosterList } from '@/apis/management/human/humanRoster';
let props = withDefaults(
  defineProps<{
    typeName: number[];
    disabled: boolean;
    placeholder: string;
    values: number[];
  }>(),
  {
    typeName: () => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
    disabled: false,
    placeholder: '请选择',
    values: () => []
  }
);
let copyValues = computed(() => props.values);

let emit = defineEmits(['update:values']);
let handleOk = () => {
  emit('update:values', selectIds.value);
  visible.value = false;
};

let mobile = ref();
let name = ref();
let userList = ref<any[]>([]);

let userCopyList = computed(() => {
  if (!mobile.value && !name.value) return userList.value;
  return userList.value.filter((item) => {
    let check1 = mobile.value ? item.mobile.includes(mobile.value) : true;
    let check2 = name.value ? item.neme.includes(name.value) : true;
    return check1 && check2;
  });
});

let loadUserList = async () => {
  let formData: any = {
    pageNumber: 0,
    pageSize: -1
  };
  if (props.typeName) formData.typeName = props.typeName.join(',');
  let { content } = await GetHumanRosterList(formData);
  userList.value = content || [];
};
loadUserList();
watch(
  () => props.typeName,
  () => loadUserList()
);
defineExpose({
  getChoiceList: () =>
    userList.value.filter(({ id }) => props.values.includes(id)) || []
});
let visible = ref();

let selectIds = ref<number[]>([]);
watch(
  () => props.values,
  (val) => (selectIds.value = val)
);
</script>
<style lang="less">
.form {
  width: 100%;
  position: relative;
  .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
  }
}
</style>
